<template>
	<view class="userinfo">
		<!-- <view class="top">
			<image :src="avatarUrl || '/static/logo.png'" mode="" @click="changeImg"></image>
		</view> -->
		<view class="info-input">
			<view class="title">
				账号：
			</view>
			<input type="text" v-model="username" placeholder="请输入账号" />
		</view>
		<view class="info-input">
			<view class="title">
				姓名：
			</view>
			<input type="text" v-model="name" placeholder="请输入昵称" />
		</view>
		<view class="btn" @click="save">
			保存并使用
		</view>
	</view>
</template>

<script>
	import {
		UserInfo,
		changeNickName,
		SaveUser
	} from "@/api/api.js"
	export default {
		data() {
			return {
				username: '',
				name: '',
				info: [],
				avatarUrl: ''
			}
		},
		onLoad() {
			this.UserInfo()
		},
		methods: {
			changeImg() {
				let that = this
				uni.chooseImage({
					sourceType: ['album', 'camera'], //从相册选择
					count: 1,
					success: (res) => {
						let igmFile = res.tempFilePaths;
						uni.showLoading({
							mask: true,
							title: '加载中'
						})
						for (let i = 0; i < igmFile.length; i++) {
							uni.uploadFile({
								url: that.$config.requestUrl +
									'/User/forUpload',
								header: {
									'token': uni.getStorageSync('token')
								},
								formData: {
									accept: 'image',
								},
								filePath: igmFile[i],
								name: 'image',
								success: (res) => {
									uni.hideLoading()
									let imgRes = JSON.parse(res.data); //微信和头条支持
									if (imgRes.status == 1) {
										let imgData = imgRes.data
										that.avatarUrl = that.$config.websiteUrl + imgData
									} else {
										uni.showToast({
											title: res.message,
											icon: "none"
										})
										return
									}
								},
								fail(err) {
									uni.hideLoading()
								}
							})
						}
					},
				});
			},
			save() {
				SaveUser({
					name: this.name,
					username: this.username
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: "none"
					})
					if (res.status == 1) {
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					}
				})
			},
			UserInfo() {
				UserInfo().then(res => {
					if (res.status == 1) {
						this.info = res.data
						this.name = res.data.name
						this.username = res.data.username
						this.avatarUrl = that.$config.websiteUrl + res.data.head_url
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.userinfo {
		.top {
			text-align: center;

			image {
				width: 100px;
				height: 100px;
				border-radius: 50%;
			}
		}

		.info-input {
			padding: 10px 5%;
			font-size: 14px;

			input {
				height: 40px;
				background-color: #fff;
				padding-left: 40rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>